<script setup>
import { find, includes, map } from 'lodash-es';
import { useRequest, useWatch } from '@/hooks';
import { getList } from '@/api/index.js';
import ToolTip from '@/components/ToolTip/index.vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  isDefaultSelect: { type: Boolean, default: () => false },
});
const emit = defineEmits(['checkedChange']);
const visible = ref(false);
const filterText = ref('');
// const searchLoading = ref(false);
const searchList = ref([]);
const seRadio = ref('');
const [enterpriseList, searchLoading, run] = useRequest(getList, {
  defaultParams: [{ enterpriseName: '' }],
});
const changeInput = () => {
  if (filterText.value.length > 0) {
    searchLoading.value = true;
    searchList.value = [];
    map(enterpriseList.value, v => {
      includes(v.enterpriseName, filterText.value) ? searchList.value.push(v) : null;
    });

    visible.value = true;
    searchLoading.value = false;
  } else {
    visible.value = false;
  }
};
const selectSearchItem = item => {
  if (item) {
    visible.value = false;
    seRadio.value = item;
    const entChecked = find(enterpriseList.value, v => v.enterpriseCode === seRadio.value);
    emit('checkedChange', entChecked);
  }
};
const handleFocus = () => {
  visible.value = filterText.value.length > 0 ? true : false;
};
const checkedChange = () => {
  const entChecked = find(enterpriseList.value, v => v.enterpriseCode === seRadio.value);
  emit('checkedChange', entChecked);
};
const currentStyles = (id, item) => {
  if (proxy.$store.state.global.setting.sideTheme === 'theme-light') {
    return id === item ? { backgroundColor: '#bfd7df' } : '';
  } else {
    return id === item ? { backgroundColor: 'rgba(0, 0, 0, 0.6)' } : '';
  }
};
useWatch(enterpriseList, n => {
  if (n?.length > 0) {
    seRadio.value = props.isDefaultSelect ? n[0].enterpriseCode : null;
    checkedChange();
  }
});
</script>
<template>
  <div class="u-h100" v-loading="searchLoading">
    <div class="se-input">
      <el-popover placement="bottom" width="290" trigger="manual" v-model="visible" popper-class="u-base-fg">
        <ul
          v-show="filterText.length > 0 && searchList.length !== 0"
          class="su-searchBox"
          :class="$store.state.global.setting.sideTheme === 'theme-light' ? 'su-searchBox-light' : 'su-searchBox-dark'"
          v-loading="searchLoading"
        >
          <li v-for="item in searchList" :key="item.enterpriseCode" @click="selectSearchItem(item.enterpriseCode)">
            {{ item.enterpriseName }}
          </li>
        </ul>
        <div v-show="searchList.length === 0" style="text-align: center; min-height: 100px">无数据</div>
        <el-input
          prefix-icon="el-icon-search"
          size="small"
          slot="reference"
          placeholder="查询"
          @input="changeInput(filterText)"
          @blur="visible = false"
          @focus="handleFocus"
          v-model="filterText"
          clearable
        ></el-input>
      </el-popover>
    </div>
    <el-divider></el-divider>
    <div class="se-tyRadio u-base-bg">
      <el-radio-group
        v-if="enterpriseList?.length > 0"
        v-model="seRadio"
        @input="checkedChange"
        v-loading="searchLoading"
      >
        <el-radio
          v-for="item in enterpriseList"
          :label="item.enterpriseCode"
          :key="item.enterpriseCode"
          :style="currentStyles(seRadio, item.enterpriseCode)"
        >
          <ToolTip :content="item.enterpriseName" effect="dark" />
        </el-radio>
      </el-radio-group>
      <div v-else class="u-df-ct u-fs14 u-mt20 u-sec-text">暂无数据</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.se-input {
  padding: 20px 20px 0 20px;
}

.se-tyRadio {
  margin: 20px;
  padding: 0;
  width: calc(100% - 40px);
  height: calc(100% - 121px);
  .el-radio-group {
    margin: 0;
    padding: 20px;
  }
}
</style>
